import InfiniteScrollContent from '@/components/InfiniteScrollContentComponent/InfiniteScrollContentComponent';
import { InfiniteScroll, Toast } from 'antd-mobile';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { getAnnounceList } from '@/api/module/information';

export default function News() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [page, setPage] = useState(1);
  const [data, setData] = useState<
    Awaited<ReturnType<typeof getAnnounceList>>['data']['list_data']
  >([]);
  const [hasMore, setHasMore] = useState(true);
  async function loadMore() {
    try {
      const res = await getAnnounceList(page + '');
      // const append2 = await Promise.resolve(append);
      setPage((val) => val + 1);
      setData((val) => [...val, ...res.data.list_data]);
      console.log(page);
      setHasMore(+res.data.page_on < res.data.total_page);
    } catch (error) {
      Toast.show({
        content: t('netError'),
      });
      setHasMore(false);
    }
  }
  return (
    <div className="text-white-1 px-4">
      <div className="title py-2 text-center text-xl font-semibold">
        {t('newInformation')}
      </div>
      <div
        className="logs-tab-content overflow-y-scroll mt-4 "
        style={{
          maxHeight: 'calc(100vh - 140px)',
        }}
      >
        {data.map((item) => (
          <div
            key={item.id}
            onClick={() => navigate('/newsDetail/' + item.id)}
            className="bg-bg-1 py-4 px-3 rounded-lg mb-4"
          >
            <div className="line-clamp-2">{item.title}</div>
            <div className="opacity-50 mt-8 text-right">{item.addtime}</div>
          </div>
        ))}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
          <InfiniteScrollContent hasMore={hasMore} />
        </InfiniteScroll>
      </div>
    </div>
  );
}
